<template>
    <div class="">
        <el-dialog title="编辑已就业" :visible.sync="dialog" width="40%" :before-close="dialogClose">
            <el-form ref="formData" :model="formData" label-width="100px">
				<el-form-item label="个人信息" prop="userid">
				    <el-select filterable v-model="formData.userid" style="width: 100%;" placeholder="请选择个人信息">
				    	<el-option :label="item.name" :value="item.id" v-for="(item, index) in User"></el-option>
				    </el-select>
				</el-form-item>
				<el-form-item label="姓名" prop="name">
				    <el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
				</el-form-item>
				<el-row>
					<el-col :span="12">
						<el-form-item label="手机号" prop="phone">
						    <el-input v-model="formData.phone" placeholder="请输入手机号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="身份证号" prop="idcard">
						    <el-input v-model="formData.idcard" placeholder="请输入身份证号"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="就业时间" prop="date">
						    <el-date-picker
						    	style="width: 100%;"
						    	v-model="formData.date"
						    	type="date"
						    	format="yyyy-MM-dd"
						    	value-format="yyyy-MM-dd"
						    	placeholder="选择日期">
						    </el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="就业地点" prop="addr_code">
						    <el-cascader
								style="width: 100%;"
								size="large"
								v-model="formData.addr_code"
								:options="options"
								@change="handleAddr">
							</el-cascader>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="单位名称" prop="company">
						    <el-input v-model="formData.company" placeholder="请输入单位名称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="月均工资" prop="income">
						    <el-input v-model="formData.income" placeholder="请输入月均工资">
								<template slot="append">元</template>
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="劳动合同" prop="labor">
						    <el-select v-model="formData.labor" style="width: 100%;" placeholder="请选择是否签订劳动合同">
						    	<el-option :label="item" :value="item" v-for="(item, index) in Site.commonTag"></el-option>
						    </el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="企业养老" prop="pension">
						    <el-select v-model="formData.pension" style="width: 100%;" placeholder="请选择是否缴纳企业养老">
						    	<el-option :label="item" :value="item" v-for="(item, index) in Site.commonTag"></el-option>
						    </el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="返乡创业意愿" prop="business">
						    <el-select v-model="formData.business" style="width: 100%;" placeholder="请选择是否返乡创业意愿">
						    	<el-option :label="item" :value="item" v-for="(item, index) in Site.commonTag"></el-option>
						    </el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="就业形式" prop="employed">
						    <el-select v-model="formData.employed" style="width: 100%;" placeholder="请选择就业形式">
						    	<el-option :label="item" :value="item" v-for="(item, index) in Site.employed"></el-option>
						    </el-select>
						</el-form-item>
					</el-col>
				</el-row>
            	<el-form-item>
            		<el-button @click="dialogClose">取 消</el-button>
            		<el-button type="primary" @click="formSubmit">确 定</el-button>
            	</el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
	import { regionData, codeToText} from 'element-china-area-data'
    export default {
        data() {
			return {
				dialog: false,
				options: regionData,
				User: [],
				Site: [],
				formData: {
					id: 0,
					userid: '', //个人id
					name: '', //姓名
					idcard: '', //身份证
					phone: '', //手机号
					addr_code: [], //就业地址
					addr_txt: '', //就业地址拼接
					date: '', //就业时间
					company: '', //就业公司
					income: '', //月收入
					labor: '', //是否签订劳动合同
					pension: '', //是否缴纳社保
					business: '', //返乡创业带动意愿
					employed: '', //就业形势
				}
			}
        },
		created() {
		},
		watch: {
			dialog () {
				if(!this.dialog) {
					this.clearFormData()
					this.$emit('getEmployed')
				} else {
					this.getUser()
					this.getSite()
				}
			}
		},
        methods: {
			handleAddr (value) {
				this.formData.addr_txt = ''
				for(let i in value){
					this.formData.addr_txt += codeToText[value[i]] + ' / ' 
				}
				this.formData.addr_txt = this.formData.addr_txt.slice(0, this.formData.addr_txt.length - 3)
			},
			getUser () {
				this.$apiPost('User/getUser').then(res => {
					if(res.code == 1) {
						this.User = res.data
					}
				})
			},
			getSite () {
				this.$apiPost('Index/getSiteFile').then(res => {
					if(res.code == 1) {
						this.Site = res.data
					}
				})
			},
			dialogClose(){
				this.$emit('dialogToggle1')
			},
			clearFormData () {
				for(let i in this.formData){
					if(i == 'id') {
						this.formData[i] = 0
					} else {
						this.formData[i] = ''
					}
				}
			},
			// 保存编辑
			formSubmit() {
				this.$apiPost('Employed/editData', this.formData).then(res => {
					if(res.code == 1) {
						this.$message(res.msg)
						this.dialogClose()
					} else {
						this.$message(res.msg)
					}
				})
			},
        }
    };
</script>
<style scoped>
	.mselect{
		width: 100%;
	}
	.mtdiv{
		margin-top: 10px;
		display: inline-block;
		width: 100%;
	}
	.mtdiv .mtdiv-v{
		float: left;
		width: 50%;
		margin-bottom: 5px;
		display: flex;
		align-items: center;
	}
	.mtdiv .mtdiv-v label{
		float: left;
		margin-right: 10px;
	}
	.mtdiv .el-input{
		float: left;
		width: 80%;
		margin: 5px 0;
	}
	.el-cascader {
		line-height: 32px !important;
	}
	.el-input__inner {
	    height: 32px !important;
	    line-height: 32px !important;
	}
	.el-input__icon {
		line-height: 32px !important;
	}
</style>
